import * as React from 'react';
import {Form as AntdForm, Spin, Statistic as AntdStatistic} from 'antd';
import {VJsonComponent, VJsonComponentBase} from "../factory";
import _ from "lodash";
import {YvanEvent} from "../types";
import {apply, YvanEventBind} from "../utils/helper";
import {valueType} from "antd/lib/statistic/utils";
import {toJS} from "mobx";

export interface StatisticVJsonProp {
    /**
     * 是否可见
     */
    visible?: boolean

    prefixCls?: string;
    className?: string;
    style?: React.CSSProperties;
    value?: valueType;
    valueStyle?: React.CSSProperties;
    valueRender?: (node: React.ReactNode) => React.ReactNode;
    title?: React.ReactNode;
    prefix?: React.ReactNode;
    suffix?: React.ReactNode;
    onMouseEnter?: YvanEvent<Statistic>;
    onMouseLeave?: YvanEvent<Statistic>;
    loading?: boolean
    placeholder: string
}

export interface StatisticState {

}

@VJsonComponent({
    view: 'statistic'
})
export default class Statistic extends VJsonComponentBase<StatisticVJsonProp, StatisticState> {
    static defaultProps = {
        visible: true,
        placeholder: '<空>'
    };

    protected constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Statistic.defaultProps
        )
    }

    get value() {
        return this.props.vjson.value
    }

    set value(v) {
        this.props.vjson.value = v
    }

    get loading() {
        return this.props.vjson.loading
    }

    set loading(v) {
        this.props.vjson.loading = v
    }

    render() {
        if (!this.props.vjson.visible) {
            return null
        }

        const value = apply(this, this.props.vjson.value);

        return (
            // @ts-ignore
            <AntdStatistic key={this.key} view_id={this.key} aria-roledescription={this.view}
                           prefixCls={apply(this, this.props.vjson.prefixCls)}
                           className={apply(this, this.props.vjson.className)}
                           style={apply(this, toJS(this.props.vjson.style))}
                           value={value ? value : ' '}
                           valueStyle={apply(this, toJS(this.props.vjson.valueStyle))}
                           valueRender={this.props.vjson.valueRender}
                           title={apply(this, this.props.vjson.title)}
                           prefix={this.props.vjson.loading ? (<Spin></Spin>) : this.props.vjson.prefix}
                           suffix={value ? apply(this, this.props.vjson.suffix) :
                               <span
                                   style={{color: 'rgba(0, 0, 0, .45)'}}>{apply(this, this.props.vjson.placeholder)}</span>}
                           onMouseEnter={YvanEventBind(this.props.vjson.onMouseEnter, this)}
                           onMouseLeave={YvanEventBind(this.props.vjson.onMouseLeave, this)}
            />
        );
    }

}
